<template>
    <el-row >
        <el-row class="pading-20 my-border my-bg">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>接口服务管理</el-breadcrumb-item>
                    <el-breadcrumb-item>dubbo服务调试</el-breadcrumb-item>
                </el-breadcrumb>
        </el-row>

        <el-row >

            <el-row>
                <el-col :span="9">
                    <label>注册中心：</label>
                    <el-select v-model="zkId"  style="width:300px" @change="zkChangeEvent(zkId)">
                        <el-option  v-for="item in zkAddressData"  :key="item.id" :label="item.zkAlias" :value="item.id"></el-option>
                    </el-select>
                </el-col>

                <el-col :span="12">
                    <label>应用名称：</label>
                    <el-select v-model="zkApp"  style="width:300px" @change="zkAppChangeEvent(zkApp)">
                        <el-option  v-for="item in zkAppData"  :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-col>

                <el-col :span="3">
                    <el-button size="small" icon="el-icon-s-promotion" type="primary" round class="right" @click="runCase">执行用例</el-button>
                </el-col>
            </el-row>


            <el-row>

                <el-col :span="9">
                    <label>接口名称：</label>
                    <el-select v-model="zkInterface"  style="width:300px" @change="zkInterfaceChangeEvent(zkInterface)">
                        <el-option  v-for="item in zkInterfaceData"  :key="item.id" :label="item.caseDesc" :value="item"></el-option>
                    </el-select>
                </el-col>


                <el-col :span="12">
                    <label>方法名称：</label>
                    <el-select v-model="zkMethod"  style="width:300px" @change="zkMethodChangeEvent(zkMethod)">
                        <el-option  v-for="item in zkMethodData"  :key="item.id" :label="item.caseDesc" :value="item"></el-option>
                    </el-select>
                </el-col>

                <el-col :span="3">
                    <el-button size="small" icon="el-icon-check" type="info" round class="right" >保存为用例</el-button>
                </el-col>
            </el-row>


        </el-row>

        <el-row>
            <el-tag effect="plain" class="left top-20">请求参数</el-tag>
            <div>
                <textarea   placeholder="请输入json格式内容" v-model="dubboRequest"></textarea>
            </div>
        </el-row>

        <el-row class="top-20">
            <el-row>
                <el-tag effect="plain" class="left">响应结果</el-tag>
                <textarea v-model="result" readonly style="outline: 0"></textarea>
            </el-row>
        </el-row>


    </el-row>
</template>

<script>
    import templateData from "../../../static/templateData";
    import {post} from "../../utils/httpUtils.js";
    import {queryBaseProject} from "../../utils/httpUtils.js";
    import {queryBaseModule} from "../../utils/httpUtils.js";
    import {queryBaseEnv} from "../../utils/httpUtils.js";
    import {filterProjectByCode} from "../../utils/utils.js";
    import {filterModuleByCode}  from  "../../utils/utils.js";
    import {filterEnvByCode} from "../../utils/utils.js";



    export default {
        name: "reportDetail",
        data(){
            return{
                zkAddressData:[],
                zkAppData:[],
                zkInterfaceData:[],
                zkMethodData:[],
                dubboRequest:"",
                result:"",
                zkId:"",
                zkApp:"",
                zkInterface:"",
                zkMethod:"",
            }
        },
        methods:{

            runCase(){
                this.result='执行中，请稍后';
                let pageObject={};
                pageObject['zkId']=this.zkId;
                pageObject['appName']=this.zkApp;
                pageObject['interfaceName']=this.zkInterface;
                pageObject['methodName']=this.zkMethod;
                pageObject['paramDatas']=JSON.stringify(JSON.parse(this.dubboRequest));
                post('api/case/runDubboTest',JSON.stringify(pageObject)).then((response)=> {
                        this.result=JSON.stringify(response.data,null,4);
                }).catch( (error)=> {
                    this.$message.error('操作异常，'+error);
                });
            },

            zkChangeEvent(){
                this.zkApp='';
                this.zkInterface='';
                this.zkMethod='';
                this.zkAppData=[];
                this.queryAllApp(this.zkId);
            },
            zkAppChangeEvent(){
                this.zkInterface='';
                this.zkMethod='';
                this.zkInterfaceData=[];
                this.queryAllInterface(this.zkId,this.zkApp);
            },
            zkInterfaceChangeEvent(){
                this.zkMethod='';
                this.zkMethodData=[];
                this.queryAllMethod(this.zkId,this.zkApp,this.zkInterface);
            },
            zkMethodChangeEvent(){
                this.queryMethodDetail();
            },

            queryAllZk(){
                let  pageObject={};
                pageObject["offset"]=1;
                pageObject["limit"]=100;
                post('api/zk/queryAllZk',JSON.stringify(pageObject)).then((response)=> {
                    this.zkAddressData=response.data.rows;
                }).catch( (error)=> {
                    this.$message.error('操作异常，'+error);
                })
            },
            queryAllApp(zkId){
                post('api/zk/queryAllAppByZkAddress',zkId).then((response)=> {
                    this.zkAppData=response.data;
                }).catch( (error)=> {
                    this.$message.error('操作异常，'+error);
                })
            },
            queryAllInterface(zkId,zkApp){
                let pageObject={};
                pageObject['zkId']=zkId;
                pageObject['appName']=zkApp;
                post('api/zk/queryAllInterfaceByZkApp',JSON.stringify(pageObject)).then((response)=> {
                    this.zkInterfaceData=response.data;
                }).catch( (error)=> {
                    this.$message.error('操作异常，'+error);
                })
            },

            queryAllMethod(zkId,zkApp,zkInterface){
                let pageObject={};
                pageObject['zkId']=zkId;
                pageObject['appName']=zkApp;
                pageObject['interfaceName']=zkInterface;
                post('api/zk/queryAllMethodByInterface',JSON.stringify(pageObject)).then((response)=> {
                    this.zkMethodData=response.data;
                }).catch( (error)=> {
                    this.$message.error('操作异常，'+error);
                })
            },
            queryMethodDetail(){
                let pageObject={};
                pageObject['zkId']=this.zkId;
                pageObject['appName']=this.zkApp;
                pageObject['interfaceName']=this.zkInterface;
                pageObject['methodName']=this.zkMethod;
                post('api/zk/queryMethodDetail',JSON.stringify(pageObject)).then((response)=> {
                    this.dubboRequest=JSON.stringify(JSON.parse(response.data.paramDatas),null,4);
                }).catch( (error)=> {
                    this.$message.error('操作异常，'+error);
                })
            }




        },
        mounted() {
            this.queryAllZk();
        }
    }

</script>

<style scoped>
    .my-border{
        border-radius:3px;
        border: 1px solid #ebebeb;
    }


    html,body{
        background-color: #fafafa;
    }
    .my-bg{
        background-color:#fff
    }

    .pading-20{
        padding: 20px;
    }

    .top-20{
        margin-top:20px;
    }

    textarea{
        width: 98%;
        height: 300px;
        font-size: 20px;
        font-family: monospace;
        color: #2a00ff;
    }

    .left{
        float: left;
    }

</style>